<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <title>时空之门</title>
    <meta name="description" content="Stone基础开发平台">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet"/>
    <link href="../static/css/login.min.css" th:href="@{/css/login.min.css}" rel="stylesheet"/>
    <link href="../static/ak/css/ry-ui.css" th:href="@{/ak/css/ry-ui.css?v=4.0.0}" rel="stylesheet"/>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
    <style type="text/css">label.error {
        position: inherit;
    }</style>
    <script>
        if (window.top !== window.self) {
            window.top.location = window.location
        }
        ;
    </script>
    <style type="text/css">
        .wrap {
            width: 100%;
            height: 100%;
            position: fixed;
            opacity: 0.8;
            background: linear-gradient(to bottom right, #000000, #656565);
            background: -webkit-linear-gradient(to bottom right, #50a3a2, #53e3a6);
        }

        .wrap ul {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -20;
        }

        .wrap ul ins {
            list-style-type: none;
            display: block;
            position: absolute;
            bottom: -120px;
            width: 15px;
            height: 15px;
            z-index: -8;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.15);
            animotion: square 25s infinite;
            -webkit-animation: square 25s infinite;
        }

        .wrap ul ins:nth-child(1) {
            left: 0;
            animation-duration: 10s;
            -moz-animation-duration: 10s;
            -o-animation-duration: 10s;
            -webkit-animation-duration: 10s;
        }

        .wrap ul ins:nth-child(2) {
            width: 40px;
            height: 40px;
            left: 10%;
            animation-duration: 15s;
            -moz-animation-duration: 15s;
            -o-animation-duration: 15s;
            -webkit-animation-duration: 11s;
        }

        .wrap ul ins:nth-child(3) {
            left: 20%;
            width: 25px;
            height: 25px;
            animation-duration: 12s;
            -moz-animation-duration: 12s;
            -o-animation-duration: 12s;
            -webkit-animation-duration: 12s;
        }

        .wrap ul ins:nth-child(4) {
            width: 50px;
            height: 50px;
            left: 30%;
            -webkit-animation-delay: 3s;
            -moz-animation-delay: 3s;
            -o-animation-delay: 3s;
            animation-delay: 3s;
            animation-duration: 12s;
            -moz-animation-duration: 12s;
            -o-animation-duration: 12s;
            -webkit-animation-duration: 12s;
        }

        .wrap ul ins:nth-child(5) {
            width: 60px;
            height: 60px;
            left: 40%;
            animation-duration: 10s;
            -moz-animation-duration: 10s;
            -o-animation-duration: 10s;
            -webkit-animation-duration: 10s;
        }

        .wrap ul ins:nth-child(6) {
            width: 75px;
            height: 75px;
            left: 55%;
            -webkit-animation-delay: 7s;
            -moz-animation-delay: 7s;
            -o-animation-delay: 7s;
            animation-delay: 7s;
        }

        .wrap ul ins:nth-child(7) {
            left: 70%;
            width: 30px;
            height: 30px;
            animation-duration: 8s;
            -moz-animation-duration: 8s;
            -o-animation-duration: 8s;
            -webkit-animation-duration: 8s;
        }

        .wrap ul ins:nth-child(8) {
            width: 90px;
            height: 90px;
            left: 80%;
            -webkit-animation-delay: 4s;
            -moz-animation-delay: 4s;
            -o-animation-delay: 4s;
            animation-delay: 4s;
        }

        .wrap ul ins:nth-child(9) {
            width: 50px;
            height: 50px;
            left: 95%;
            animation-duration: 20s;
            -moz-animation-duration: 20s;
            -o-animation-duration: 20s;
            -webkit-animation-duration: 20s;
        }

        @keyframes square {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }
            100% {
                bottom: 400px;
                -webkit-transform: translateY(-500);
                transform: translateY(-500)
            }
        }

        @-webkit-keyframes square {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }
            100% {
                bottom: 400px;
                -webkit-transform: translateY(-500);
                transform: translateY(-500)
            }
        }
    </style>
</head>

<body class="signin">
<div class="wrap">
    <div class="signinpanel">
        <div class="row">
            <div class="col-sm-7">
                <div class="signin-info">
                    <div class="logopanel m-b">
                        <h1><img alt="[ Stone ]" src="../static/slogin.png" th:src="@{/slogin.png}"></h1>
                    </div>
                    <div class="m-b"></div>
                    <h4>欢迎使用 <strong>Stone基础开发平台</strong></h4>
                    <ul class="m-b">
                        <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> SpringBoot</li>
                        <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Mybatis</li>
                        <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Shiro</li>
                        <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Thymeleaf</li>
                        <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Bootstrap</li>
                    </ul>
                    <!--<strong>还没有账号？ <a href="#">立即注册&raquo;</a></strong>-->
                </div>
            </div>
            <div class="col-sm-5">
                <form id="signupForm">
                    <h4 class="no-margins">登录：</h4>
                    <p class="m-t-md">Stone SaaS快速开发框架</p>
                    <input type="text" name="username" class="form-control uname" placeholder="用户名" value="admin"/>
                    <input type="password" name="password" class="form-control pword" placeholder="密码"
                           value="admin123"/>
                    <div class="row m-t" th:if="${captchaEnabled==true}">
                        <div class="col-xs-6">
                            <input type="text" name="validateCode" class="form-control code" placeholder="验证码"
                                   maxlength="5" autocomplete="off">
                        </div>
                        <div class="col-xs-6">
                            <a href="javascript:void(0);" title="点击更换验证码">
                                <img th:src="@{captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
                            </a>
                        </div>
                    </div>
                    <div class="checkbox-custom" th:classappend="${captchaEnabled==false} ? 'm-t'">
                        <input type="checkbox" id="rememberme" name="rememberme"> <label for="rememberme">记住我</label>
                    </div>
                    <button class="btn btn-success btn-block" id="btnSubmit" data-loading="正在验证登录，请稍后...">登录</button>
                </form>
            </div>
        </div>
        <div class="signup-footer">
            <div class="pull-left">
                &copy; 2019 All Rights Reserved. Vean <br>
            </div>
        </div>
    </div>
    <ul>
        <ins></ins>
        <ins></ins>
        <ins></ins>
        <ins></ins>
        <ins></ins>
        <ins></ins>
        <ins></ins>
        <ins></ins>
        <ins></ins>
    </ul>
</div>
<script th:inline="javascript"> var ctx = [[@{
    /}]]; var captchaType = [[${captchaType}]]; </script>
<!-- 全局js -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<!-- 验证插件 -->
<script src="../static/ajax/libs/validate/jquery.validate.min.js"
        th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/validate/messages_zh.min.js"
        th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ak/js/ry-ui.js" th:src="@{/ak/js/ry-ui.js?v=4.0.0}"></script>
<script src="../static/ak/login.js" th:src="@{/ak/login.js}"></script>
</body>
</html>
